<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style>
        /* 
           颜色单位 ：
            在CSS中可以直接使用颜色名来设置各种颜色
                比如：red,orange,yellow,blue,green
                但是在css中直接使用颜色名是非常的不方便
            
            RGB值：
                RGB通过三种颜色的不同浓度来调配出不同的颜色
                R red G green B blue
                每一种颜色的范围在0-255(0%-100%)之间
                语法：RGB（红色，绿色，蓝色）
            
            RGBA：
                就是在RGB的基础上增加了一个a表示不透明度
                需要四个值，前三个和RGB一样，第四个表示不透明度
                1表示完全不透明 0表示完全透明 .5半透明

            十六进制的RGB值：
                语法：#红色绿色蓝色
                颜色浓度通过00-ff
                如果颜色两位两位重复可以进行简写
                    #aabbcc-->#abc

            HSL值 HSLA值
                H 色相（0-360）
                S 饱和度，颜色的浓度0%-100%
                L 亮度，颜色的亮度 0%-100%
        */
        .box1{
            height: 100px;
            width: 100px;
            background-color: blue;
            background-color: rgb(255, 0, 0);
            background-color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
            background-color: #ffff00;
            background-color: #bbffaa;
            background-color: #bfa;
            background-color: rgba(100, 20, 88, .5);
            background-color: hsl(160, 80%, 80%);
            background-color: hsla(160, 80%, 80%,.5);
        }
    </style>
</head>

    <div class="box1"></div>
</body>
</html>